<template>
    <div class="VipTop">
        <div class="return">
            <router-link to="/waimai-view">
                <img class="returnImg" src="src/assets/img/waimai/fanhui.webp">
            </router-link>
            会员权益
        </div>
    </div>
    <div class="TopBG">
        <div class="TopSwiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <ul>
                            <li class="DdXiangQing">详情1</li>
                        </ul>
                    </div>
                    <div class="swiper-slide swiper-slide-active">
                        <ul>
                            <li class="DdXiangQing">详情2</li>
                        </ul>
                    </div>
                    <div class="swiper-slide swiper-slide-active">
                        <ul>
                            <li class="DdXiangQing">详情3</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="BGWhite">
            <p>每月享6个会员红包</p>
            <span>与满减、折扣同享</span>
        </div>
        <div class="Bottom">
            <div class="KaiTong">￥<a class="a15">15</a> 开通会员</div>
            <div class="VipSpanGray1">放心开通，不自动续费</div>
        </div>
    </div>

</template>

<script>
    import Swiper from "swiper"

    export default {
        name: "HuiYuanWch",
        methods() {
            new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            })

            for (i = 0; i < Swiper.pagination.bullets.length; i++) {
                Swiper.pagination.bullets[i].onmouseover = function () {
                    this.click();
                };
            }
        }
    }

</script>

<style scoped>
    @import "/node_modules/swiper/dist/css/swiper.min.css";

    .VipTop {
        width: 100vw;
        height: 60px;
        text-align: center;
        background-color: #ffd043;
        line-height: 55px;
        font-size: 25px;
        font-weight: 500;
        position: sticky;
        top: 0;
        font-family: 黑体;
    }

    .return {
        font-weight: bold;
        font-size: 20px;
    }

    .returnImg {
        width: 15px;
        margin-bottom: -5px;
        margin-left: 10px;
        float: left;
        margin-top: 15px;
    }

    .TopBG {
        margin-top: -1px;
        height: 80vh;
        width: 100vw;
        background-image: linear-gradient(#ffd043, #f6dc94, #f4f4f4, #f4f4f4)
    }

    .Bottom {
        position: fixed;
        bottom: 0;
        margin: 0 8vw 45px;
    }

    .KaiTong {
        width: 85vw;
        height: 45px;
        background-image: linear-gradient(#ffa97a, #ffa56f, #fd8213, #fda47e);
        text-align: center;
        font-size: 22px;
        color: white;
        font-family: 幼圆;
        border-radius: 15px;
        display: inline-block;
    }

    .VipSpanGray1 {
        color: #acacac;
        text-align: center;
        font-size: 14px;
        font-family: 幼圆;
        margin-top: 10px;
    }

    .a15 {
        color: white;
        font-size: 33px
    }

    .BGWhite {
        width: 90vw;
        height: 80%;
        background-color: white;
        text-align: center;
        margin: 0 auto;
        border-radius: 15px;
    }

    .BGWhite > p {
        font-size: 20px;
        height: 15px;
        font-weight: 500;
        font-family: 微软雅黑;
        line-height: 80px;
    }

    .BGWhite > span {
        font-size: 13px;
        line-height: 55px;
        color: #6d6d6d;
    }

    .TopSwiper {
        height: 10%;
    }
</style>